import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import '../../../../lib_baseview/lib_baseview.dart';
import '../../../../lib_baseview/utils/constant/text_styles.dart';
import '../../../../lib_baseview/utils/screen_utils.dart';
import '../../../../resource/language/generated/l10n.dart';
import '../../interface/root_proxy_model.dart';
import 'car_list_page_model.dart';

class CarListPage extends StatelessWidget {
  const CarListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProxyProvider<RootProxyModel, CarListPageModel>(
          create: (context) => CarListPageModel(),
          update: (context, rootProxyModel, leafModel) {
            if (leafModel == null) throw ArgumentError.notNull('leafModel');
            leafModel.roomModel = rootProxyModel;
            return leafModel;
          },
        ),
      ],
      child: Consumer<CarListPageModel>(
        builder: (context, model, child) {
          // int count = ((model.data?.users.length ?? 0) > 1)
          //     ? model.data!.users.length - 1
          //     : 0;
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: 588.w,
                width: ScreenUtils.ins.screenWidth,
                decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/park_bg.webp"),
                      fit: BoxFit.contain,
                    ),
                    color: Colors.transparent),
                child: Text('model.data?.users.isEmpty'),
                // child: model.data?.users.isEmpty ?? true
                //     ? emptyWidget(model)
                //     : Padding(
                //         padding: EdgeInsets.only(left: 20.w, right: 20.w),
                //         child: Column(
                //           mainAxisSize: MainAxisSize.min,
                //           children: [
                //             SizedBox(
                //               height: 145.w,
                //             ),
                //             Expanded(
                //               child: CustomScrollView(
                //                 slivers: [
                //                   const SliverToBoxAdapter(
                //                     child: Text(
                //                         'child: getTopItem(model.data!.users[0]),'),
                //                     // child: getTopItem(model.data!.users[0]),
                //                     // change
                //                   ),
                //                   SliverToBoxAdapter(
                //                     child: SizedBox(
                //                       height: 12.w,
                //                     ),
                //                   ),
                //                   SliverGrid(
                //                     delegate: SliverChildBuilderDelegate(
                //                       (BuildContext context, int index) {
                //                         // return getNormalItem(
                //                         //     model.data!.users[index + 1],
                //                         //     index + 1);
                //                         return Text('getNormalItem');
                //                       },
                //                       childCount: count, //内部控件数量
                //                     ),
                //                     gridDelegate:
                //                         SliverGridDelegateWithFixedCrossAxisCount(
                //                       crossAxisCount: 3,
                //                       crossAxisSpacing: 12.w,
                //                       mainAxisSpacing: 12.w,
                //                       childAspectRatio: 104 / 120,
                //                     ),
                //                   ),
                //                   SliverToBoxAdapter(
                //                     child: SizedBox(
                //                       height: 20.w,
                //                     ),
                //                   ),
                //                 ],
                //               ),
                //             ),
                //           ],
                //         ),
                //       ),
              ),
              // getMineItem(model),
              Text('getMineItem'),
            ],
          );
        },
      ),
    );
  }

  emptyWidget(CarListPageModel model) {
    // if (model.data == null) {
    //   return const SizedBox.shrink();
    // }
    return Column(
      children: [
        SizedBox(
          height: 145.w,
        ),
        Container(
          width: 335.w,
          height: 384.w,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.black.withOpacity(0.8),
            border: Border.all(color: const Color(0xFFCBA669), width: 0.5),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(height: 126.w),
              image('park_empty_car.webp', width: 184, height: 48),
              const SizedBox(height: 20),
              Text(
                T.current!.no_car_admission,
                style: JRTextStyles.styleFont14W400
                    .copyWith(color: const Color(0x7FFFFFFF)),
              )
            ],
          ),
        )
      ],
    );
  }

  // getTopItem(SimpleChannelUser user) {
  //   return GestureDetector(
  //     onTap: () {
  //       RoomPersonalDataWidget.show(rootNavigatorState.currentContext!,
  //           RootProxyModel.instance?.channel, user);
  //     },
  //     child: Container(
  //       width: 335.w,
  //       height: 120.w,
  //       decoration: BoxDecoration(
  //         borderRadius: BorderRadius.circular(8),
  //         color: Colors.black.withOpacity(0.8),
  //         border: Border.all(color: const Color(0xFFCBA669), width: 0.5),
  //       ),
  //       child: Column(
  //         mainAxisSize: MainAxisSize.min,
  //         children: [
  //           Container(
  //             width: 204.w,
  //             height: 19.w,
  //             decoration: const BoxDecoration(
  //                 image: DecorationImage(
  //               image: AssetImage("assets/images/park_item_first.webp"),
  //               fit: BoxFit.contain,
  //             )),
  //             alignment: AlignmentDirectional.center,
  //             child: Text(
  //               'TOP.1',
  //               style: JRTextStyles.styleFont14W600
  //                   .copyWith(color: const Color(0xFF271C18)),
  //             ),
  //           ),
  //           SizedBox(
  //             height: 12.w,
  //           ),
  //           Row(
  //             children: [
  //               SizedBox(
  //                 width: 20.w,
  //               ),
  //               Stack(
  //                 children: [
  //                   const SizedBox(
  //                     width: 58,
  //                     height: 58,
  //                   ),
  //                   PositionedDirectional(
  //                       top: 0,
  //                       start: 0,
  //                       child: image('park_crown_ic.png', width: 30)),
  //                   PositionedDirectional(
  //                     bottom: 0,
  //                     end: 0,
  //                     child: AvatarImage(
  //                       url: user.avatar,
  //                       width: 48,
  //                       height: 48,
  //                       borderRadius: 24,
  //                       border: Border.all(
  //                           color: const Color(0xFFCBA669), width: 1),
  //                     ),
  //                   ),
  //                 ],
  //               ),
  //               SizedBox(
  //                 width: 12.w,
  //               ),
  //               Flexible(
  //                 child: Column(
  //                   crossAxisAlignment: CrossAxisAlignment.start,
  //                   children: [
  //                     const SizedBox(
  //                       height: 10,
  //                     ),
  //                     Text(
  //                       user.nickname,
  //                       maxLines: 1,
  //                       overflow: TextOverflow.ellipsis,
  //                       style: JRTextStyles.styleFont14W500,
  //                     ),
  //                     Row(
  //                       mainAxisSize: MainAxisSize.min,
  //                       children: [
  //                         Image.asset(
  //                           CarUtils.getCarLevelPicAssetWithLevel(
  //                               user.car.carMetaInfo.level),
  //                           width: 28,
  //                           fit: BoxFit.fitWidth,
  //                         ),
  //                         const SizedBox(
  //                           width: 3,
  //                         ),
  //                         Flexible(
  //                           child: Text(
  //                             user.car.carMetaInfo.name,
  //                             maxLines: 1,
  //                             style: JRTextStyles.styleFont12W400
  //                                 .copyWith(color: const Color(0xFFEACB9D)),
  //                           ),
  //                         )
  //                       ],
  //                     )
  //                   ],
  //                 ),
  //               ),
  //               CachedNetworkImage(
  //                 imageUrl: user.car.carMetaInfo.rightImgLink ?? "",
  //                 width: 110.w,
  //                 height: 70.w,
  //                 fit: BoxFit.contain,
  //                 errorWidget: (context, url, error) {
  //                   return SvgPicture.asset('assets/image/ic_default_car.svg');
  //                 },
  //               ),
  //               SizedBox(
  //                 width: 28.w,
  //               )
  //             ],
  //           ),
  //         ],
  //       ),
  //     ),
  //   );
  // }

  // getNormalItem(SimpleChannelUser user, int index) {
  //   return GestureDetector(
  //     onTap: () {
  //       RoomPersonalDataWidget.show(rootNavigatorState.currentContext!,
  //           RootProxyModel.instance?.channel, user);
  //     },
  //     child: Stack(
  //       children: [
  //         PositionedDirectional(
  //           bottom: 0,
  //           start: 0,
  //           end: 0,
  //           child: Container(
  //               height: 24.w,
  //               alignment: AlignmentDirectional.center,
  //               decoration: const BoxDecoration(
  //                 color: Color(0xFFCBA669),
  //                 borderRadius: BorderRadiusDirectional.only(
  //                     bottomStart: Radius.circular(8),
  //                     bottomEnd: Radius.circular(8)),
  //               )),
  //         ),
  //         Container(
  //           decoration: BoxDecoration(
  //             borderRadius: BorderRadius.circular(8),
  //             color: Colors.black.withOpacity(0.8),
  //             border: Border.all(color: const Color(0xFFCBA669), width: 0.5),
  //           ),
  //           child: Column(
  //             children: [
  //               Container(
  //                 width: 52.w,
  //                 height: 14.w,
  //                 decoration: const BoxDecoration(
  //                     image: DecorationImage(
  //                   image: AssetImage("assets/images/park_item_normal.webp"),
  //                   fit: BoxFit.contain,
  //                 )),
  //                 alignment: AlignmentDirectional.center,
  //                 child: Text(
  //                   'TOP.${index + 1}',
  //                   style: JRTextStyles.styleFont10W500
  //                       .copyWith(color: const Color(0xFF271C18)),
  //                 ),
  //               ),
  //               SizedBox(
  //                 height: 12.w,
  //               ),
  //               CachedNetworkImage(
  //                 imageUrl: user.car.carMetaInfo.rightImgLink ?? "",
  //                 width: 70.w,
  //                 height: 44.w,
  //                 fit: BoxFit.contain,
  //                 errorWidget: (context, url, error) {
  //                   return SvgPicture.asset('assets/image/ic_default_car.svg');
  //                 },
  //               ),
  //               SizedBox(
  //                 height: 4.w,
  //               ),
  //               Row(
  //                 mainAxisSize: MainAxisSize.min,
  //                 children: [
  //                   const SizedBox(
  //                     width: 4,
  //                   ),
  //                   Image.asset(
  //                     CarUtils.getCarLevelPicAssetWithLevel(
  //                         user.car.carMetaInfo.level),
  //                     width: 28,
  //                     fit: BoxFit.fitWidth,
  //                   ),
  //                   const SizedBox(
  //                     width: 3,
  //                   ),
  //                   Flexible(
  //                     child: Text(
  //                       user.car.carMetaInfo.name,
  //                       overflow: TextOverflow.ellipsis,
  //                       maxLines: 1,
  //                       style: JRTextStyles.styleFont12W400
  //                           .copyWith(color: const Color(0xFFEACB9D)),
  //                     ),
  //                   )
  //                 ],
  //               ),
  //               const Spacer(),
  //               Container(
  //                 height: 24.w,
  //                 alignment: AlignmentDirectional.center,
  //                 padding: const EdgeInsets.only(left: 10, right: 10),
  //                 child: Row(
  //                   mainAxisSize: MainAxisSize.min,
  //                   children: [
  //                     AvatarImage(
  //                         url: user.avatar,
  //                         width: 16,
  //                         height: 16,
  //                         borderRadius: 8),
  //                     SizedBox(
  //                       width: 4.w,
  //                     ),
  //                     Flexible(
  //                       child: Text(
  //                         user.nickname,
  //                         maxLines: 1,
  //                         overflow: TextOverflow.ellipsis,
  //                         style: JRTextStyles.styleFont10W400,
  //                       ),
  //                     )
  //                   ],
  //                 ),
  //               )
  //             ],
  //           ),
  //         ),
  //       ],
  //     ),
  //   );
  // }

  // getMineItem(CarListPageModel model) {
  //   SimpleChannelUser user = SimpleChannelUser.create()
  //     ..car = UserManager.instance.currentUser!.car
  //     ..nickname = UserManager.instance.currentUser!.nickname
  //     ..vipIcons = UserManager.instance.currentUser!.icons
  //     ..avatar = UserManager.instance.currentUser!.avatar
  //     ..id = UserManager.instance.currentUser!.id;
  //   int rank = 0;
  //   model.data?.users.forEachIndexed((e, index) {
  //     if (e.id.toInt() == UserManager.instance.currentUid) {
  //       user = e;
  //       rank = index + 1;
  //     }
  //   });

  //   return Container(
  //       decoration: const BoxDecoration(
  //           color: RColors.ff1C1C1C,
  //           borderRadius: BorderRadius.only(
  //               topLeft: Radius.circular(4), topRight: Radius.circular(4))),
  //       child: SafeArea(
  //           child: Container(
  //               padding: EdgeInsets.symmetric(horizontal: 20.w),
  //               height: 54.w,
  //               child: Row(
  //                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
  //                 children: [
  //                   Flexible(
  //                     child: GestureDetector(
  //                       onTap: () {
  //                         RoomPersonalDataWidget.show(
  //                             rootNavigatorState.currentContext!,
  //                             RootProxyModel.instance?.channel,
  //                             user);
  //                       },
  //                       child: Row(
  //                         mainAxisSize: MainAxisSize.min,
  //                         children: [
  //                           ShaderMask(
  //                             shaderCallback: (bounds) => const LinearGradient(
  //                               colors: <Color>[
  //                                 Color(0xFFFFE9A2),
  //                                 Color(0xFFF6BB55),
  //                               ],
  //                             ).createShader(bounds),
  //                             child: Text(
  //                               rank > 0 ? '$rank' : '-',
  //                               style: const TextStyle(
  //                                   fontSize: 18,
  //                                   fontWeight: FontWeight.w700,
  //                                   color: Colors.white),
  //                             ),
  //                           ),
  //                           SizedBox(
  //                             width: 16.w,
  //                           ),
  //                           AvatarImage(
  //                             url: user.avatar,
  //                             width: 36.w,
  //                             height: 36.w,
  //                             border: Border.all(
  //                                 color: Colors.white.withOpacity(0.3),
  //                                 width: 1),
  //                           ),
  //                           SizedBox(
  //                             width: 12.w,
  //                           ),
  //                           Flexible(
  //                               child: Text(
  //                             user.nickname,
  //                             maxLines: 1,
  //                             style: JRTextStyles.styleFont14W600,
  //                           )),
  //                           SizedBox(
  //                             width: 6.w,
  //                           ),
  //                           UserLevWidget(
  //                             vipImgStr: user.vipIcons.middleIcon,
  //                           ),
  //                           UserCarLevelWidget(
  //                             carLevel: user.car.carMetaInfo.level,
  //                           ),
  //                           SizedBox(
  //                             width: 20.w,
  //                           ),
  //                         ],
  //                       ),
  //                     ),
  //                   ),
  //                   rank > 0
  //                       ? CachedNetworkImage(
  //                           imageUrl: user.car.carMetaInfo.rightImgLink,
  //                           width: 60.w,
  //                           height: 38.w,
  //                           fit: BoxFit.contain,
  //                           errorWidget: (context, url, error) {
  //                             return SvgPicture.asset(
  //                                 'assets/image/ic_default_car.svg');
  //                           },
  //                         )
  //                       : GestureDetector(
  //                           onTap: () async {
  //                             await BlindBoxMainPage.show(
  //                                 refer: "room_car_list");
  //                             model.requestData();
  //                           },
  //                           child: Container(
  //                             padding: EdgeInsets.symmetric(
  //                                 horizontal: 14.w, vertical: 8.w),
  //                             decoration: const ShapeDecoration(
  //                                 gradient: LinearGradient(
  //                                   colors: [
  //                                     Color(0xFFF7DF9B),
  //                                     Color(0xFFEFB856)
  //                                   ],
  //                                   begin: Alignment.centerLeft,
  //                                   end: Alignment.centerRight,
  //                                 ),
  //                                 shape: StadiumBorder()),
  //                             child: Text(
  //                               user.car.driving
  //                                   ? T.current!.promote_car
  //                                   : T.current!.get_car,
  //                               style: JRTextStyles.styleFont13W600
  //                                   .copyWith(color: const Color(0xff271C18)),
  //                             ),
  //                           ),
  //                         ),
  //                 ],
  //               ))));
  // }
}
